<template>
    <view class="container">
        <!-- 套餐选择区域 -->
        <view class="package-section">
            <view class="package-options">
                <view
                    v-for="(pkg, index) in packages"
                    :key="index"
                    class="package-item"
                    :class="{ active: selectedPackage === index }"
                    @click="selectPackage(index)"
                >
                    <text class="package-times">{{ pkg.times }}次</text>
                    <text class="package-price">¥{{ pkg.price }}</text>
                </view>
            </view>
            <view class="package-desc"
                >AI设计次数可用于生成原创作品，永久有效</view
            >
        </view>

        <!-- 订单信息区域 -->
        <view class="order-section">
            <view class="section-title">订单信息</view>
            <view class="order-content">
                <view class="order-row">
                    <text class="order-label">套餐内容</text>
                    <text class="order-value"
                        >{{ packages[selectedPackage].times }}次AI设计次数</text
                    >
                </view>
                <view class="order-row">
                    <text class="order-label">支付金额</text>
                    <text class="order-value order-price"
                        >¥{{ packages[selectedPackage].price }}</text
                    >
                </view>
            </view>
        </view>

        <!-- 支付方式区域 -->
        <!--        <view class="payment-section">-->
        <!--            <view class="section-title">支付方式</view>-->
        <!--            <view class="payment-options">-->
        <!--                <view-->
        <!--                    v-for="(method, index) in paymentMethods"-->
        <!--                    :key="index"-->
        <!--                    class="payment-item"-->
        <!--                    :class="{ active: selectedPayment === index }"-->
        <!--                    @click="selectPayment(index)"-->
        <!--                >-->
        <!--                    <view class="payment-icon">{{ method.icon }}</view>-->
        <!--                    <text class="payment-name">{{ method.name }}</text>-->
        <!--                </view>-->
        <!--            </view>-->
        <!--        </view>-->

        <!-- 支付按钮 -->
        <view class="pay-button" @click="handlePay"> 立即支付 </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

// 套餐数据
const packages = ref([
    { times: 5, price: 10 },
    { times: 10, price: 15 },
    { times: 20, price: 30 },
    { times: 50, price: 80 },
]);

// 支付方式数据
const paymentMethods = ref([
    { name: '微信', icon: '微' },
    { name: '支付宝', icon: '支' },
    { name: '钱包', icon: '钱' },
]);

// 选中的套餐索引
const selectedPackage = ref(0);

// 选中的支付方式索引
const selectedPayment = ref(0);

// 选择套餐
const selectPackage = (index) => {
    selectedPackage.value = index;
};

// 选择支付方式
const selectPayment = (index) => {
    selectedPayment.value = index;
};

// 处理支付
const handlePay = () => {
    const pkg = packages.value[selectedPackage.value];
    const method = paymentMethods.value[selectedPayment.value];

    uni.showModal({
        title: '支付确认',
        content: `您将支付¥${pkg.price}购买${pkg.times}次AI设计次数，使用${method.name}支付`,
        success: (res) => {
            if (res.confirm) {
                uni.showToast({
                    title: '支付成功',
                    icon: 'success',
                });
            }
        },
    });
};
</script>

<style lang="scss" scoped>
.container {
    padding: 16rpx;
    background-color: #f5f5f5;
    min-height: calc(100vh - 32rpx);
}

.package-section {
    background-color: #fff;
    border-radius: 12px;
    padding: 52rpx 32rpx 22rpx;
    .package-desc {
        text-align: center;
        height: 28rpx;
        font-weight: 400;
        font-size: 20rpx;
        color: #c2c2c2;
        line-height: 28rpx;
    }
}

.package-title {
    height: 28rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
    line-height: 40rpx;
    text-align: left;
}

.package-options {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.package-item {
    border: 1rpx solid #e0e0e0;
    border-radius: 8rpx;
    text-align: center;
    margin-bottom: 15rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 128rpx;
    height: 128rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 2rpx solid #f3f7f8;
    color: #222222;
    &.active {
        background: #f25a27;
        color: #ffffff;
        .package-times {
            color: #ffffff;
        }
        .package-price {
            color: #ffffff;
        }
    }

    .package-times {
        color: #222222;
        font-weight: bold;
    }

    .package-price {
        font-size: 24rpx;
        color: #ff5722;
        margin: 12rpx 0 0;
    }
}

.order-section,
.payment-section {
    border-radius: 12rpx;
    padding: 20rpx 16rpx;
    margin: 16rpx 0 0;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.order-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.order-label {
    height: 38rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;
    line-height: 38rpx;
    text-align: left;
}

.order-value {
    height: 38rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;

    &.order-price {
        font-weight: bold;
        color: #ff5722;
    }
}

.payment-options {
    display: flex;
    justify-content: space-between;
}

.payment-item {
    width: 30%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payment-item.active {
    border-color: #07c160;
    background-color: rgba(7, 193, 96, 0.1);
}

.payment-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: bold;
}

.payment-name {
    font-size: 14px;
}

.pay-button {
    position: fixed;
    bottom: 40rpx;
    width: calc(100% - 64rpx);
  width: 686rpx;
  height: 72rpx;
  background: linear-gradient( 90deg, #F32F1A 0%, #F68A2D 100%);
  font-weight: 400;
  font-size: 28rpx;
  color: #FFFFFF;
  line-height: 72rpx;
  text-align: center;
}
</style>
